<template>
	<view  class="search_page">
		<view class="head_box">
			<image @click="returnPage" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/23.png" mode=""></image>
			<view class="inp_box">
			    <image class="img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/24.png" mode=""></image>
				<input type="text" v-model="key" placeholder="请输入商品内容"  @blur="qk()" />	
			</view>
			<view class="btn" @click="bindSe()">搜索</view>
		</view>
		<view class="goods_list">
			<view class="goods_item" v-for="(item,index) in collectList" :key="index" @click="bindGoodsShop(item.id)">
				<view class="left">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="sub_title">{{item.subtitle}}</view>
					<view class="price_box">
						<view class="xian">{{item.price}}</view>
						<view class="old">{{item.original_price}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kong" v-if="collectList.length==0">
			<view class="zhongjian">
				<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/kong.png" mode=""></image>
				<view class="title">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectList:[],
				key:'',
				token:"65843b17-f22b-438b-ad25-be07d64464fb",
				shop_id: 907,
			};
		},
		onLoad(option) {
			this.token=option.token
			this.shop_id=option.shop_id
		},
		methods:{
			bindSe(){
				var url = '/api/goods/goods/like_key';
				let params = {
					token:this.token,
					shop_id:this.shop_id,
					key:this.key,
				};
				this.Unfold_data.yh_data(params, 'POST', url, res => {
					if (res.data.code == 1) {
						this.loadingType = 'more';
						if (res.data.data== null||res.data.data.length==0) {
							this.loadingType = 'noMore';
							return;
						}
						if (res.data.data.length < 10) {
							this.loadingType = "noMore";
						}
						// this.collectList = res.data.data.data;
						this.collectList = this.collectList.concat(res.data.data);
						this.page = this.page+ 1;
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			},
			bindGoodsShop(id){
				uni.navigateTo({
					url:'../goods_detail/goods_detail?id='+id+'&shop_id='+this.ids+'&token='+this.token
				})
			},
			qk(){
				this.collectList.length=0
			},
			returnPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		background-color: #f6f6f6;
	}
.search_page{
	width: 750upx;
	.head_box{
		width: 750upx;
		height: 150upx;
		padding:70upx 20upx 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		image{
			width: 19upx;
			height: 32upx;
		}
		.inp_box{
			margin-left: 30upx;
			width: 540upx;
			height: 58upx;
			border: 2upx solid #FF4E00;
			border-radius: 29upx 0 0 29upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.img{
				width: 29upx;
				height: 28upx;
				margin-left: 20upx;
			}
			input{
				margin-left: 10upx;
			}
		}
		.btn{
			width: 100upx;
			height: 58upx;
			background-color: #FF4E00;
			text-align: center;
			line-height: 58upx;
			font-size: 26upx;
			color: #FFFFFF;
			border-radius: 0 29upx 29upx 0;
		}
	}
	.goods_list{
		width: 750upx;
		margin-top: 200upx;
		padding: 0 20upx;
		.goods_item{
			width: 710upx;
			height: 260upx;
			border-radius: 25upx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: flex-start;
			margin-bottom: 20upx;
			padding: 30upx;
			.left{
				image{
					width: 180upx;
					height: 180upx;
					border-radius: 15upx;
				}
			}
			.right{
				margin-left: 20upx;
				position: relative;
				.title{
					width: 440upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28upx;
					color: #333333;
				}
				.sub_title{
					margin-top: 20upx;
					width: 400upx;
					font-size: 22upx;
					color: #CCCCCC;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.price_box{
					position: absolute;
					top: 140upx;
					display: flex;
	                justify-content: flex-start;
					align-items: center;
					.xian{
						font-size: 24upx;
						color: #dd3030;
					}
					.old{
						font-size: 20upx;
						color: #C0C4CC;
						text-decoration: line-through;
						margin-left: 20upx;
					}
				}
			}
		}
	}
	.kong{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 600upx;
		.zhongjian{
			text-align: center;
			image{
				width: 180upx;
				height: 180upx;
			}
			.title{
				font-size: 28upx;
				color:#dd3030;
			}
		}
	}
}
</style>
